<template>
  <div ref="chart" class="echarts-container"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name: "FaultChart",
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.handleResize);
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose();
    }
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    initChart() {
      this.chartInstance = echarts.init(this.$refs.chart);

      // 获取当前时间
      const now = new Date();

      // 计算最近的整分钟时间（向下取整）
      const startTime = new Date(now);
      startTime.setMinutes(Math.floor(now.getMinutes()));
      startTime.setSeconds(0);
      startTime.setMilliseconds(0);

      // 生成时间轴数据（每10分钟间隔，共2小时跨度）
      const timeData = [];
      for (let i = 0; i <= 12; i++) {
        // 12个间隔（2小时/10分钟=12）
        const time = new Date(startTime);
        time.setMinutes(time.getMinutes() + i * 10);

        // 格式化为中文时间格式（HH:MM）
        const hours = time.getHours().toString().padStart(2, "0");
        const minutes = time.getMinutes().toString().padStart(2, "0");
        timeData.push(`${hours}:${minutes}`);
      }

      let options = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
        },
        textStyle: {
          fontSize: 15,
          color: "#fff",
        },
        legend: {
          data: [
            "运输系统",
            "排水系统",
            "通风系统",
            "压风系统",
            "瓦斯系统",
            "供配电",
            "视频监控",
          ],
          textStyle: {
            fontSize: 15,
            color: "#fff",
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: timeData,
          axisLabel: {
            formatter: function (value) {
              return value;
            },
          },
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "运输系统",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0), // 13个0
          },
          {
            name: "排水系统",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0),
          },
          {
            name: "通风系统",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0),
          },
          {
            name: "压风系统",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0),
          },
          {
            name: "瓦斯系统",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0),
          },
          {
            name: "供配电",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0),
          },
          {
            name: "视频监控",
            type: "line",
            stack: "Total",
            data: new Array(13).fill(0),
          },
        ],
      };
      this.chartInstance.setOption(options);
    },
    handleResize() {
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
    // 提供外部调用的方法 - 重新初始化图表
    refresh() {
      if (this.chartInstance) {
        this.chartInstance.dispose();
      }
      this.initChart();
    },
  },
  watch: {},
};
</script>

<style scoped>
.echarts-container {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  position: relative;
}
</style>
